const letterWrapClass = 'letter-wrap';
const letterWrapElements = document.getElementsByClassName(letterWrapClass);

[...letterWrapElements].forEach(el => {
    letterWrap(el, letterWrapClass);
    letterAnimation(el, letterWrapClass);
});



function letterWrap(el, cls) {
    const words = el.textContent.split(' ');
    const letters = [];

    cls = cls || 'letter-wrap'

    words.forEach(word => {
        let html = '';
        for (var letter in word) {
            html += `
        <span class="${cls}__char">
          <span class="${cls}__char-inner" data-letter="${word[letter]}">
            ${word[letter]}
          </span>
        </span>
      `;
        };

        let wrappedWords = `<span class="${cls}__word">${html}</span>`;
        letters.push(wrappedWords);
    });

    return el.innerHTML = letters.join(' ');
}

function letterAnimation(el, cls) {
    const tl = new TimelineMax({ paused: true });
    const characters = el.querySelectorAll(`.${cls}__char-inner`);
    const duration = el.hasAttribute('data-duration') ? el.dataset.duration : 0.3;
    const stagger = el.hasAttribute('data-stagger') ? el.dataset.stagger : 0.03;

    el.animation = tl.staggerTo(characters, duration, {
        y: '-100%',
        ease: Power4.easeOut
    }, stagger);

    el.addEventListener('mouseenter', (event) => event.currentTarget.animation.play());
    el.addEventListener('mouseout', (event) => el.animation.reverse());
}
function gettime() {
    var now = new Date();
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
    var h = now.getHours();
    var i = now.getMinutes();
    var s = now.getSeconds();
    var span = document.querySelector('#time span');
    var M = h>12?'下午':'上午';
    s = s>=10?s:`0${s}`;
    i = i>=10?i:`0${i}`;
    span.innerHTML = `${y}-${m}-${d} ${M}${h}:${i}:${s}`;
}

setInterval(gettime);